<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="searchForm"
				:inline="true"
				:model="queryData"
				label-width="auto"
				size="medium"
				@submit.native.prevent
				class="flex-warp-container"
			>
				<el-form-item
					:label="$t('merchant.payment_manufacturer')"
					prop="paymentMerchantName"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model.trim="queryData.paymentMerchantName"
						:placeholder="$t('common.please_enter')"
						autocomplete="off"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('merchant.payment_merchantType')"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.paymentMerchantType"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-for="item in paymentMerchantType"
							:key="item.code"
							:value="item.code"
							:label="item.description"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="margin-left: 30px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('401031')"
						icon="el-icon-plus"
						type="success"
						size="medium"
						@click="add()"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				:max-height="tableHeight"
				highlight-current-row
				style="width: 100%"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					align="center"
					type="index"
					:label="`${$t('common.serial_number')}`"
					width="70"
				>
					<template slot-scope="scope">
						<span>{{ getSerialNum(scope.$index) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="paymentMerchantName"
					align="center"
					:label="`${$t('merchant.payment_manufacturer')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.paymentMerchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="paymentMerchantCode"
					align="center"
					:label="`${$t('merchant.payment_merchantCode')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.paymentMerchantCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="paymentMerchantType"
					align="center"
					:label="`${$t('merchant.payment_merchantType')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							typeFilter(
								scope.row.paymentMerchantType,
								'paymentMerchantType'
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="remark"
					align="center"
					:label="`${$t('merchant.remark')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					:label="`${$t('merchant.creator')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="`${$t('merchant.create_time')}`"
					width="160px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedBy"
					align="center"
					:label="`${$t('merchant.last_operate')}`"
					width="150px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					:label="`${$t('merchant.last_operate_time')}`"
					width="160px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					:label="$t('common.actions')"
					width="240px"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('401032')"
							type="primary"
							:disabled="scope.row.status === 1"
							@click="edit(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			center
			:title="`${$t('merchant.payment_channel')}${title}`"
			:visible.sync="addVisible"
			:width="
				getWidth({
					zh_CN: '800px',
					en_US: '1100px',
					vi_VN: '1000px',
					th_TH: '900px'
				})
			"
		>
			<el-form
				ref="addForm"
				label-width="auto"
				:rules="rules"
				:model="addFormData"
				@submit.native.prevent
			>
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="`${$t('merchant.payment_manufacturer')}`"
							prop="paymentMerchantName"
						>
							<el-input
								v-model.trim="addFormData.paymentMerchantName"
								:placeholder="$t('merchant.form_rules_tip4-20')"
								:maxlength="20"
								autocomplete="off"
								clearable
								style="width: 260px"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="$t('funds.thirdPeymentChannelConfig.name')"
							prop="paymentMerchantNameCode"
						>
							<el-select
								v-model="addFormData.paymentMerchantNameCode"
								style="width: 260px"
								:placeholder="$t('common.please_choose')"
								@change="checkRiskValue($event)"
							>
								<el-option
									v-for="item in chantName"
									:key="item.code"
									:value="item.code"
									:label="item.description"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="$t('merchant.payment_merchantType')"
							prop="paymentMerchantType"
						>
							<el-select
								v-model="addFormData.paymentMerchantType"
								style="width: 260px"
								:placeholder="$t('common.please_choose')"
							>
								<el-option
									v-for="item in paymentMerchantType"
									:key="item.code"
									:value="item.code"
									:label="item.description"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="
								$t(
									'funds.thirdPeymentChannelConfig.payment_merchant_code'
								)
							"
							prop="paymentMerchantCode"
						>
							<el-input
								v-model.trim="addFormData.paymentMerchantCode"
								:placeholder="$t('common.please_enter')"
								clearable
								v-input="{ name: 'noEmpty' }"
								maxlength="50"
								style="width: 260px"
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item
					:label="$t('funds.thirdPeymentChannelConfig.publicKey')"
					prop="publicKey"
				>
					<el-input
						v-model.trim="addFormData.publicKey"
						:placeholder="$t('common.please_enter')"
						autocomplete="off"
						maxlength="50"
						v-input="{ name: 'noEmpty' }"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('funds.thirdPeymentChannelConfig.privateKey')"
					prop="privateKey"
				>
					<el-input
						v-model.trim="addFormData.privateKey"
						:placeholder="$t('common.please_enter')"
						autocomplete="off"
						maxlength="50"
						v-input="{ name: 'noEmpty' }"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('funds.thirdPeymentChannelConfig.request_url')"
					prop="requestUrl"
				>
					<el-input
						v-model.trim="addFormData.requestUrl"
						:placeholder="$t('common.please_enter')"
						autocomplete="off"
						maxlength="200"
						v-input="{ name: 'noEmpty' }"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('funds.thirdPeymentChannelConfig.result_url')"
					prop="resultUrl"
				>
					<el-input
						v-model.trim="addFormData.resultUrl"
						:placeholder="$t('common.please_enter')"
						autocomplete="off"
						maxlength="200"
						v-input="{ name: 'noEmpty' }"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('funds.thirdPeymentChannelConfig.back_url')"
					prop="notifyUrl"
				>
					<el-input
						v-model.trim="addFormData.notifyUrl"
						:placeholder="$t('common.please_enter')"
						autocomplete="off"
						v-input="{ name: 'noEmpty' }"
						maxlength="200"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('common.components.remark')"
					prop="remark"
				>
					<el-input
						v-model.trim="addFormData.remark"
						:placeholder="$t('common.please_enter')"
						autocomplete="off"
						type="textarea"
						rows="6"
						show-word-limit
						v-input="{ name: 'noEmpty' }"
						clearable
						maxlength="500"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('funds.thirdPeymentChannelConfig.other_1')"
					prop="ext1"
				>
					<el-input
						v-model.trim="addFormData.ext1"
						:placeholder="$t('common.please_enter')"
						autocomplete="off"
						maxlength="200"
						v-input="{ name: 'noEmpty' }"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('funds.thirdPeymentChannelConfig.other_2')"
					prop="ext2"
				>
					<el-input
						v-model.trim="addFormData.ext2"
						:placeholder="$t('common.please_enter')"
						autocomplete="off"
						maxlength="200"
						v-input="{ name: 'noEmpty' }"
						clearable
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="submit()">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</el-dialog>
		<image-viewer
			:visible.sync="imageViewerVisible"
			:url-list="[imageAddress]"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import {
	getpaymentMerchantadd,
	getPaymentMerchantquery,
	getPaymentMerchantupdate,
	getPayMerchantName
} from '@/api/merchant/merchant-config/customer-service'
export default {
	name: routerNames.paymentManufacturer,
	components: { MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			chantName: [],
			title: '',
			queryData: {
				gameName: '',
				venueCode: undefined,
				status: undefined,
				iconStatus: undefined,
				gameId: ''
			},
			searchGameType: 0,
			addVisible: false,
			addFormData: {
				gameName: '',
				venueCode: undefined,
				status: undefined,
				iconStatus: undefined,
				accessInfo: '',
				remark: '',
				paymentMerchantNameDesc: undefined,
				paymentMerchantNameCode: undefined
			},
			rowData: null,
			loading: false,
			tableData: [],
			imageViewerVisible: false,
			imageAddress: '',
			total: 0,
			changeStatusRemark: ''
		}
	},
	computed: {
		rules() {
			return {
				paymentMerchantName: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.input'
						),
						trigger: 'blur'
					},
					{
						min: 4,
						max: 20,
						message: this.$t('merchant.form_rules_tip4'),
						trigger: 'blur'
					}
				],
				paymentMerchantNameCode: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.select_name'
						),
						trigger: 'change'
					}
				],
				paymentMerchantType: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.select_type'
						),
						trigger: 'blur'
					}
				],
				paymentMerchantCode: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip3'
						),
						trigger: 'blur'
					}
				],
				privateKey: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip13'
						),
						trigger: 'blur'
					}
				],
				requestUrl: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip14'
						),
						trigger: 'blur'
					}
				]
				// remark: [
				// 	{
				// 		required: true,
				// 		message: this.$t(
				// 			'funds.thirdPeymentChannelConfig.form_rules_tip15'
				// 		),
				// 		trigger: 'blur'
				// 	},
				// 	{
				// 		min: 2,
				// 		max: 500,
				// 		message: this.$t(
				// 			'funds.thirdPeymentChannelConfig.form_rules_tip2'
				// 		),
				// 		trigger: 'blur'
				// 	}
				// ]
			}
		},
		paymentMerchantType() {
			return this.globalDics.paymentMerchantType || []
		},

		uploadAPI() {
			return this.$api.imageUpload
		}
	},
	created() {
		this.getPayMerchantName()
	},
	methods: {
		getPayMerchantName() {
			getPayMerchantName().then((res) => {
				if (res?.code === 200) {
					this.chantName = res.data || []
				}
			})
		},
		// 重置
		reset() {
			this.pageNum = 1
			this.searchGameType = 0
			this.queryData = {}
			this.$refs.searchForm.resetFields()
			this.loadData()
		},
		// 新增
		add() {
			this.title = this.$t('common.add')
			this.addFormData = {}
			this.addVisible = true
			this.rowData = null
			this.$nextTick(() => {
				this.$refs.addForm?.clearValidate()
			})
		},
		// 查询数据
		loadData() {
			this.loading = true
			const params = {
				...this.queryData,
				...this.getParams()
			}
			for (const k in params) {
				if (params[k] === '' || params[k] === undefined) {
					delete params[k]
				}
			}
			getPaymentMerchantquery(params)
				.then((res) => {
					this.loading = false
					this.tableData = res.data.record
					this.total = res.data.totalRecord
				})
				.finally(() => {
					this.loading = false
				})
		},
		// 新增/编辑提交
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					const params = { ...this.addFormData }
					for (const k in params) {
						if (
							params[k] === '' ||
							params[k] === undefined ||
							(Array.isArray(params[k]) && !params[k].length)
						) {
							delete params[k]
						}
					}

					if (params.id) {
						// 编辑
						getPaymentMerchantupdate({
							...params
						}).then((res) => {
							if (res.code !== 200) {
								return this.$message.error(res.msg)
							}
							this.$message.success(
								this.$t('common.edit_success')
							)
							this.addVisible = false
							this.loadData()
						})
					} else {
						// 新增
						getpaymentMerchantadd(params).then((res) => {
							if (res.code !== 200) {
								return this.$message.error(res.msg)
							}
							this.addVisible = false
							this.$message.success(this.$t('common.add_success'))
							this.loadData()
						})
					}
				}
			})
		},
		// 编辑
		edit(data) {
			this.$refs.addForm?.clearValidate()
			this.title = this.$t('common.edit')
			this.addFormData.remark = data.remark
			this.addFormData = { ...data }
			this.addFormData.paymentMerchantType = data.paymentMerchantType + ''
			this.addFormData.paymentMerchantNameCode =
				data.paymentMerchantNameCode + ''
			this.addVisible = true
		},
		checkRiskValue(val) {
			const item = this.chantName.find((item) => item.code === val)
			this.addFormData.paymentMerchantNameDesc = item.description
		}
	}
}
</script>

<style lang="scss" scoped></style>
